<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位样式</title>
    <style>
        body{
            height: 1000px;
        }
        /*
          定位:指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
          position:
            可选值:
                - static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
                - relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
                    当元素开启 position 属性设置为relative时，则开启了元素的相对定位
                     1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
                     2.相对定位时相对于元素在 “文档流” 中 “原来” 的位置进行定位
                     3.相对定位的元素不会脱离文档流
                     4. 相对定位会使元素提升一个层级（即盖住其他元素）
                - absolute 生成绝对定位的元素，相对于 static 定位以外的 "第一个父元素"进行定位。
                    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
                     1.开启绝对定位，会使元素脱离文档流
                     2.开启绝对定位以后，如果不设置偏移量， 则元素的位置不会发生变化
                     3.绝对定位使相对于离他最近的没有开启了定位的祖先元素进行定位
                       如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
                     4.绝对定位会使元素提升一个层级
                     5.绝对定位会改变元素的性质:
                        内联元素变成 块元素
                        块元素的宽度和高度默认都被内容撑开
                - fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
                    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
                    固定定位可以视为一种特殊的绝对定位，拥有绝对定位的特性，并且不会随着浏览器窗口滚动而滚动
            
            层级:
                z-index  属性指定一个元素的堆叠顺序。
                拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
                注意:
                    - 没有开启定位的元素，设置z-index 无效
        */
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: fixed;
            left: 20px;
            top: 20px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color:pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>